<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="webjars/jquery/3.6.4/jquery.min.js"></script>
    <link href="webjars/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <script>
        $(function (){
            //全选
            $("#all").click(function (){
                $("[name='chk']").prop("checked",$(this).prop("checked"));
            })
            //修改的回显
            $(".btn-primary").click(function (){
                location='find?id='+$(this).val()
            })
            //删除按钮
            $(".btn-warning").click(function (){
                let $name = $("[name='chk']:checked");
                if($name.length==0){
                    alert("请选择要删除的id");
                }else{
                    let values="";
                    $("[name='chk']:checked").each(function (){
                        values+=$(this).val()+","
                    })
                    alert(values);
                    if(confirm("确认要删除"+values+"数据吗？")){
                          $.getJSON(
                              "del",
                              {ids:values},
                              function (obj){
                                  if(obj){
                                      alert("删除成功！");
                                      location='list'
                                  }else{
                                      alert("删除失败！");
                                  }
                              }
                          )
                    }
                }
            })
        })
    </script>
</head>
<body>

          <div class="container">
              <table class="table table-bordered table-hover">
                   <tr>
                       <th>
                           <input type="checkbox" id="all">
                           <button class="btn btn-warning">删除</button>
                       </th>
                       <th>序号</th>
                       <th>账号</th>
                       <th>密码</th>
                       <th>年龄</th>
                       <th>入职时间</th>
                       <th>地址</th>
                       <th>角色</th>
                       <th>
                           <a th:href="@{toadd}">新增</a>
                       </th>
                   </tr>
                  <tr th:each="user,index:${pager.list}" th:object="${user}">
                      <td><input type="checkbox" name="chk" th:value="*{id}"></td>
                      <td th:text="${index.count}"></td>
                      <td th:text="*{name}"></td>
                      <td th:text="*{pwd}"></td>
                      <td th:text="*{age}"></td>
                      <td th:text="*{#dates.format(in_time,'yyyy年MM月dd日')}"></td>
                      <td th:text="*{address}"></td>
                      <td>
                          <span th:each="role:*{roles}" th:object="${role}">
                              <span th:text="*{rname}"></span>&nbsp;&nbsp;
                          </span>
                      </td>
                      <td>
                          <button class="btn btn-primary" th:value="*{id}">修改</button>
                      </td>
                  </tr>
                  <tr>
                      <td colspan="10" align="center">
                          共<span th:text="${pager.total}"></span>条数据，
                          共<span th:text="${pager.pages}"></span>页，
                          当前是第<span th:text="${pager.pageNum}"></span>页。

                          <a th:href="@{list(offset=1)}">首页</a>
                          <a th:if="${pager.hasPreviousPage}" th:href="@{list(offset=${pager.prePage})}">上页</a>
                          <a th:if="${pager.hasNextPage}" th:href="@{list(offset=${pager.nextPage})}">下页</a>
                          <a th:href="@{list(offset=${pager.pages})}">末页</a>
                      </td>
                  </tr>
              </table>
          </div>

</body>
</html>
